<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table{
      border-collapse: collapse;
    }
    table th,table td{
      border: 1px solid #ccc;
      padding: 15px;
    }
    .search{
      margin-bottom: 20px;
    }
    .active{
      color: red;
    }
  </style>
</head>

<body>
  <div class="search">
    <!-- 
      oninput是只要输入就会触发 
      onchange 是input框的内容改变才会触发
    -->
    <input oninput="search()" type="text" id="keywords" placeholder="请输入姓名/学号"
    ><button onclick="search()">搜索</button>
  </div>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>注册时间</th>
      </tr>
    </thead>
    <tbody id="data">
     
    </tbody>
  </table>
  <p class="page">

  </p>
  <script>
    var stus = [
      { id: 20190101, name: '张三', age: 18, createDate: '2022-09-14' },
      { id: 20190102, name: '李四', age: 20, createDate: '2022-09-14' },
      { id: 20190103, name: '王五', age: 20, createDate: '2022-09-14' },
      { id: 20190104, name: '小白', age: 21, createDate: '2022-09-14' },
      { id: 20190105, name: '小明', age: 21, createDate: '2022-09-14' },
      { id: 20190106, name: '小张', age: 22, createDate: '2022-09-14' },
      { id: 20190107, name: '小花', age: 22, createDate: '2022-09-14' },
      { id: 20190108, name: '小兰', age: 19, createDate: '2022-09-14' },
    ]

    var searchData=[]
    function search(){
      // 获取用户输入的关键字
      var keywords = (document.getElementById('keywords').value).trim()
      // 通过关键字进行搜索
      searchData = stus.filter(function(item){
        //       如果姓名中不包含关键字，则寻找id中是否包含关键字
        //      (item.name).includes(keywords) || 
        //      (''+item.id).includes(keywords)
        return  (keywords?
                (item.name).includes(keywords) || 
                (''+item.id).includes(keywords)
                :true)
      })
      // 搜索结果后，重新渲染html代码
      view()
    }


    function view(page=1){
       // 每页显示的记录数
       var perpage = 3
      // 记录的总数
      var total = searchData.length

      // 总页数,  Math.ceil()上舍入 ，Math.ceil(2.0001) === 3
      var pagecount = Math.ceil(total / perpage)
      console.log(pagecount);

      // 截取开始位置
      var start = (page - 1) * perpage
      // 截取结束位置
      var end = start + perpage

      // 截取得到分页之后的数据
      var pageData = searchData.slice(start, end)
      console.log(pageData);




      var temp=''
      // 通过循环，将搜索之后的数据混入html代码
      pageData.forEach(function(item){ 
        temp+=`<tr>
                  <td>${item.id}</td>
                  <td>${item.name}</td>
                  <td>${item.age}</td>
                  <td>${item.createDate}</td>
               </tr>`
      })
      // 获取到表格中显示数据的html元素
      var data=document.getElementById('data');
      // 判断如果没有搜索结果，则渲染“抱歉！没有找到结果”
      if(searchData.length===0){
        temp=`
          <tr>
            <td colspan="999" align="center">抱歉！没有找到结果。</td>
          </tr>`
      }
      // 将html代码渲染到表格中
      data.innerHTML=temp

      // 累加得到渲染页码的html代码
      var page_temp = `<button onclick="view(${page-1})" 
                        ${page===1 && 'disabled'}>
                        上一页</button>`
      for(var i=1;i<=pagecount;i++){
        page_temp+=`<button onclick="view(${i})" 
        class="${page===i ? 'active':''}">${i}</button>`
      }
      page_temp+=`<button onclick="view(${page+1})" 
                  ${page === pagecount && 'disabled'}>
                  下一页</button>`
      // 通过css选择器去查找元素,将page_temp累加的html代码
      //  插入.page这个容器
      document.querySelector('.page').innerHTML=searchData.length === 0
                                                ? '' : page_temp
    }
    // view()
    search()
  </script>
</body>

</html>